<template>
  <div class="app">
    <Person ref="myPerson" :list="personList"/>
  </div>
</template>
<script lang="ts" setup name="App">
import Person from '@/components/Person.vue'
// 引入由TS定义的数据类型时需要再类型前面加上关键字type
import { type PersonList } from '@/type';  //如果不加type会漂红报错，主要是怕引入的人使用错误
import { reactive } from 'vue';
// 把personList的数据类型进行限制的同时让其成为响应式数据
// 公式：变量a = reactive<T>({})
let personList = reactive<PersonList>([
  { id: 'zhangsan', name: '张三', age: 18 },
  { id: 'lisi', name: '李四', age: 28 },
  { id: 'wangwu', name: '王五', age: 38 }
])
</script>
<style>
.app {
  background-color: #ddd;
  box-shadow: 0px 0px 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>